<template>
  <div>
    <!-- vjs-theme-forest -->
    <video ref="videoPlayer" class="video-js"></video>
  </div>
</template>

<script>
import videojs from "video.js";

export default {
  props: {
    options: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  watch: {
    options: {
      deep: true,
      handler: function(newV, oldV) {
        if (this.player) {
          this.player.poster(newV.poster);
          this.player.src(newV.sources[0]);
        }
      },
    },
  },
  data() {
    return {
      player: null,
    };
  },
  mounted() {
    let that = this;
    this.player = this.$video(
      this.$refs.videoPlayer,
      this.options,
      function onPlayerReady() {
        // console.log(this.setPoster);
      }
    );
  },

  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  },
};
</script>
